import {useState,useEffect} from 'react';
import Pagination from './components/Pagination';
import Loading from './components/Loading';
import './App.css'
function App() {
 const [list,setList] = useState([]);//新闻列表数据
 const [current,setCurrent] = useState(1) //当前第几页
 const [visible,setVisible] = useState(false);//是否显示加载提示
//  获取新闻数据
 const getNews = ()=>{
  setVisible(true)
  fetch(`http://dida100.com/mi/list.php?page=${current}&channel_id=c6`)
  .then(res=>res.json())
  .then(res=>{
    // 更新新闻列表数据
    setList(res.result)
    setVisible(false)
  })
  .catch(err=>console.error(err))
 }

 // 当current发生变化时候执行getNews
useEffect(()=>{
  getNews();
},[current])


  return ( <div>
   {list.map(item=><div key={item.docid}>{item.title}<hr/></div>)}
     {/* 分页组件传入current 当前页,当当前页发生变化 执行onChange事件 更新current */}
    <Pagination current={current} onChange={n=>setCurrent(n)}></Pagination>
    <Loading visible={visible} title="加载中...."></Loading>
  </div> );
}


export default App;

// 组件:分页组件
// list 新闻列表数据
// current 当前是多少页
// getNews 获取新闻的数据